<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <title>归档</title>


</head>
<body>
    <!--导航-->
    <div th:replace="~{index::indexNav}"></div>

    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big m-opacity-mini">
        <div class="ui container ">
            <!--头部-->
            <div class="ui segment  padded rounded">
                <div class="ui middle aligned grid two column rounded">
                    <div class="column">
                        <h3 class="ui header teal">归档</h3>
                    </div>
                    <div class="column right aligned">
                        共<h2 class="ui orange header m-inline-block mth" th:text="'&nbsp;'+${number}+'&nbsp;'">&nbsp;14&nbsp; </h2>篇博客
                    </div>
                </div>
            </div>
            <div th:each="year,iter:${years}" >
                <h2 class="ui header center aligned" th:text="${year.key}">2020</h2>
                <div class="ui vertical menu fluid">
                    <a th:href="@{'/blogPage/'+${blog.getId()}}" class="item" target="_blank" th:each="blog,iter1:${year.value}">
                    <span>
                        <i class="ui small teal circle icon " ></i> <span th:text="${blog.getTitle()}">【一年总结】记我的大一生活</span>
                        <div class="ui teal basic left pointing label m-padded-mini" th:text="${#dates.format(blog.getPublishDate(),'MM月dd')}">7月04</div>
                    </span>
                        <div class="ui orange basic left pointing label m-padded-mini right aligned" th:switch="${blog.getProperty()}">
                            <span th:case="1">原创</span>
                            <span th:case="2">转载</span>
                            <span th:case="3">翻译</span>
                        </div>
                    </a>
                </div>
                <br>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
    <div th:replace="~{index::footer}"></div>


<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
<script type="text/javascript">
// $('.menu.toggle').click(function (){
//     $('.m-item').toggleClass('m-mobile-hide');
// });
//不知道为什么达不到预期的效果
    $("#b1").click(function (){
        $(".m-item").toggleClass("m-mobile-hide");
    });
    $('#payButton').popup({
    popup:$('.popup.payQR'),
    on:'click',
    position:'bottom center'
    })

</script>
</body>
</html>